<script>
  import { mapGetters, mapState } from 'vuex'
  import SkeletonHeader from './SkeletonHeader.vue'
  import SkeletonSidebar from './SkeletonSidebar'
  import SkeletonNavTabs from './SkeletonNavTabs'
  import KeepViewAlive from './KeepViewAlive'
  import { cacheManager } from './index'
  import { isIframeRoute } from '@/util/iframe'

  export default {
    name: 'Skeleton',
    computed: {
      ...mapState('viewState', ['collapse']),
      ...mapGetters('viewState', ['urlTabs']),
      ...mapState('user', ['sysUser']),
      isIframeRoute() {
        return isIframeRoute(this.$route.path)
      }
    },
    mounted() {
      cacheManager.attach(this.$children)
    },
    updated() {
      cacheManager.attach(this.$children)
    },
    beforeDestroy() {
      cacheManager.destroy()
    },
    render() {
      const { collapse, $route, isIframeRoute, urlTabs } = this
      const exclude = ['NotFound', 'Forbidden', 'SystemError']
      return (
        <div class={['skeleton', { 'sidebar-collapse': collapse }]}>
          <SkeletonHeader />
          <SkeletonSidebar />
          <SkeletonNavTabs context-menu collapse={collapse} />
          <div class="skeleton-content">
            {process.env.NODE_ENV === 'production' ? (
              <KeepAlive exclude={exclude}>
                <RouterView vShow={!isIframeRoute} key={$route.path} />
              </KeepAlive>
            ) : (
              <KeepViewAlive exclude={exclude}>
                <RouterView vShow={!isIframeRoute} key={$route.path} />
              </KeepViewAlive>
            )}
            {urlTabs.map(tab => {
              return <iframe class="skeleton-iframe" vShow={$route.path === tab.path} key={tab.path} src={tab.url} />
            })}
          </div>
        </div>
      )
    }
  }
</script>

<style lang="scss">
  @import '~@/assets/styles/theme-default/skeleton/index';

  .sidebar-collapse {
    .skeleton-content {
      left: 64px;
    }

    .sidebar {
      width: 64px;
    }
  }

  .skeleton-content {
    position: absolute;

    /* 减去头部高度和标签高度 */
    top: $header-height + $nav-bar-height;
    right: 0;
    bottom: 0;
    left: $sidebar-width;
    overflow: auto;
    transition: left 0.3s cubic-bezier(0.55, 0, 0.1, 1);

    .skeleton-iframe {
      @include absolute;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: 0;
    }
  }
</style>
